@import '~styles/settings.scss';

.c-datasets-locations {
  display: flex;
  flex-flow: column;
  height: 100%;

  .search-results-wrapper {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 60px);
  }

  .search-results {
    position: relative;
    min-height: rem(200px);
    padding-right: 10px;
  }

  .datasets-search {
    margin-bottom: rem(20px);

    > div {
      margin-bottom: rem(15px);
      padding-left: 10px;
    }
  }

  .locations-search {
    position: relative;

    .location {
      font-size: rem(14px);
      color: $slate;
      margin-bottom: rem(15px);
      padding-left: 20px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: left;
      line-height: 1.4;

      p {
        font-size: 14px;
      }

      &:hover {
        p {
          color: darken($slate, 20%);
        }
      }

      &.active {
        p {
          color: $green-gfw;
        }
      }
    }

    .location-icon {
      fill: $green-gfw;
      height: rem(23px);
      width: rem(23px);
      min-height: rem(23px);
      min-width: rem(23px);
      margin-right: rem(5px);
    }
  }

  .empty-search {
    .message {
      min-height: 100px;
      justify-content: center;
    }
  }
}
